<!-- 西南登录页 -->
<template>
  <div class="body">
    <img src="@/assets/images/login-bg.jpg" style="
        width: 100%;
        height: 100%;
        position: fixed;
        -webkit-user-drag: none;
        z-index: -9999;
      " />
    <!-- 登录输入框 -->
    <div class="login-wrapper layui-form">
      <h1 class="sys-name" data-scroll-reveal="enter bottom and move 20px over .5s">
        {{ sysName }}
      </h1>
      <div class="login-cont login-cont-xn" data-scroll-reveal="enter right and move 20px over .5s">

        <h1>用户登录</h1>
        <div style="height: 100%" v-if="currAuthType === '系统默认'" class="benxitong">
          <div class="item">

            <input type="text" name="j_username" id="text_username" class="username input" autocomplete="off"
              placeholder="请输入账号" required v-model="loginForm.username" @keyup.enter="submit" />
          </div>

          <div class="item">
            <input type="password" name="j_password" id="text_password" class="password input" autocomplete="off"
              placeholder="请输入密码" required v-model="loginForm.pwd" @keyup.enter="submit" />
          </div>

          <div class="item">
            <input type="text" name="" id="text_verifycode" class="vcode input" autocomplete="off" placeholder="请输入验证码"
              required v-model="loginForm.captcha" @keyup.enter="submit" />
            <!-- 验证码图片 -->
            <img id="imgVerifyCode" alt="验证码" width="85" height="50" title="点击更换" class="vcodeimg" @click="getVerifycode"
              :src="verifyCodeSrc" />
          </div>

          <div class="item-submit">
            <button lay-submit lay-filter="loginSubmit" class="btn-submit" @click="submit">
              登录
            </button>
          </div>
        </div>
        <div v-if="currAuthType === '统一认证'" class="tongyi">
          <iframe id="ifm" ref="ifm"
            src="https://iam.xnyqt.petrochina/login-pwd.html?tenantCode=xnyqt&appCode=wtgcjcsjglxt" scrolling="no"
            frameborder="0" :style="ifmOffset"></iframe>
          <div class="download-ca-tip" id="iframeerrortip">
            <h2 class="tt">提示</h2>
            <p>您的电脑没有安装中国石油认证中心统一认证根证书，请点击链接：<a href="https://am.iam.cnpc/" target="_blank">https://am.iam.cnpc/</a>下载根证书
            </p>
            <p><img src="@/assets/images/download-ca-tip.png" alt="下载指引" width="350"></p>
            <p>根证书安装成功后，重启浏览器生效。</p>
          </div>
        </div>
      </div>
    </div>

    <div class="area-select-wrapper">
      <div class="area-name">
        <label>登陆方式：</label>
        <h2 id="areaName" @click="showAuthList">{{ currAuthType }}</h2>
        <i class="icon icon-select"></i>
      </div>
      <ul class="area-list" v-show="isShowAuthTypeList">
        <li data-id="tyrz" @click="selectAuthType('统一认证')">统一认证</li>
        <li data-id="xtmr" @click="selectAuthType('系统默认')">系统默认</li>
      </ul>

      <div class="btn-download">
        <download-outlined @click="getInstallPackageList" />
      </div>
    </div>

    <!-- 下载安装包 -->
    <div class="download-package">
      <a-modal v-model:visible="downloadPackageVisible" :mask="false" :footer="null" title="下载安装包" width="60%"
        :bodyStyle="{ padding: 0 }">
        <a-spin :spinning="loading">
          <a-table :columns="columns.filter((item) => item.show)" :data-source="installPackageList"
            :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" :pagination="false" bordered
            size="small" class="ks-table">
            <template #bodyCell="{ column, index, record }">
              <template v-if="column.dataIndex === 'index'">
                {{ index + 1 }}
              </template>
              <template v-if="column.dataIndex === 'action'">
                <a-space>
                  <template v-if="record.exist !== 'false'">
                    <a-button type="primary" size="small" @click="handleDownload(record.name)">
                      <download-outlined></download-outlined>下载
                    </a-button>
                  </template>
                  <template v-else>
                    <span>暂未上传~</span>
                  </template>
                </a-space>
              </template>
            </template>
          </a-table>
        </a-spin>
      </a-modal>
    </div>
  </div>
</template>
<script setup>
import {
  DownloadOutlined,
} from "@ant-design/icons-vue";
import { onMounted, reactive, ref } from "vue";
import store from "@/store";
import { SYS_NAME, HOMEPAGE, SITE_DIRECTORY } from "@/config";
import { getCaptcha, login, getBasinList } from "@/api/login";
import { getUserAuthorityList } from "@/api/login";
import { message } from "ant-design-vue";
import router from "@/router";
import CryptoJS from "crypto-js";
import { getFileList, download } from "@/api/file";
// 下载安装包相关功能 start
const downloadPackageVisible = ref(false);
const installPackageList = ref([]);
const getInstallPackageList = () => {
  getFileList({ fileType: "tools" }).then((res) => {
    downloadPackageVisible.value = true;
    if (Array.isArray(res)) {
      res.forEach((item) => {
        installPackageList.value.push({
          name: item.fileName,
          lastModified: item.lastModified,
          fileSize: item.fileSize
        });
      });
    }

    downloadPackageVisible.value = true;
  });
};
const loading = ref(false);
const columns = reactive([
  {
    title: "序号",
    dataIndex: "index",
    width: 70,
    align: "center",
    show: true,
  },
  {
    title: "名称",
    dataIndex: "name",
    align: "left",
    show: true
  },
  {
    title: "大小",
    dataIndex: "fileSize",
    align: "left",
    show: true
  },
  {
    title: "最后修改时间",
    dataIndex: "lastModified",
    align: "left",
    show: true
  },
  {
    title: "操作",
    dataIndex: "action",
    width: 150,
    align: "center",
    show: true
  },
]);
const handleDownload = (filename) => {
  let _postParams = {
    fileType: "tools",
    fileName: filename,
  };
  download(_postParams).then((res) => {
    if (res) {
      let url = res.filePath;
      url = `${location.protocol}//${location.host}${SITE_DIRECTORY}/api${window.basintag}/file/getFileStream?filePath=${url}`;
      window.open(url);
    }
  });
}
// 下载安装包相关功能 end

// 登陆表单
const loginForm = reactive({
  username: "",
  password: "",
  pwd: "",
  captcha: null,
  basinId: null,
});
// 显示/隐藏系统名称
const sysName = ref(SYS_NAME);
// 验证码图片地址
const verifyCodeSrc = ref(require("@/assets/images/loading.gif"));
// 当前认证方式
const currAuthType = ref("系统默认");
// 认证方式下拉框显示状态
const isShowAuthTypeList = ref(false);

// 切换探区下拉框显示状态操作
const showAuthList = () => {
  isShowAuthTypeList.value = !isShowAuthTypeList.value;
};
// 选择探区操作
const selectAuthType = (type) => {
  currAuthType.value = type;
  isShowAuthTypeList.value = false;
};
// 统一认证框位置
const ifmOffset = reactive({
  top: "35px",
  display: "block",
});
// 当前探区
const currBasin = ref("");
// 登陆
const submit = async () => {
  if (!loginForm.username || !loginForm.pwd) {
    message.error("用户名和密码不能为空！");
    return;
  }
  loginForm.password = CryptoJS.SHA1(loginForm.pwd).toString();
  let _postParams = JSON.parse(JSON.stringify(loginForm));
  delete _postParams.pwd;
  await login(_postParams).then((res) => {
    if (res.code === 0) {
      // 获取当前用户权限
      getUserAuthorityList({ userid: "" }).then((authres) => {
        res.userRoles = authres.userRoles || [];
        res.basinId = currBasin.value.prospectId;
        store.commit("loginUserInfo/loginSucess", res);
        window.versions.getUserName(loginForm.username)
        //登陆成功
        router.replace(HOMEPAGE);
      });
    } else {
      message.error(res.msg);
      getVerifycode();
    }
  });
};
// 获取验证码
const getVerifycode = async () => {
  await getCaptcha().then((res) => {
    verifyCodeSrc.value = window.URL.createObjectURL(res);
  });
};
// 获取探区列表
const fatchBasinList = async () => {
  await getBasinList()
    .then((res) => {
      currBasin.value = res.basinList[0];
      loginForm.basinId = currBasin.value.prospectId;
    })
    .catch((err) => {
      message.error(err.msg);
    });
};
// 判断统一认证登录页是否能正常加载
// const iframeisCanLoad = () => {
//   let _script = document.createElement("script");
//   _script.type = "text/javascript";
//   _script.src = "https://iam.xnyqt.petrochina/login-pwd.html?tenantCode=xnyqt&appCode=wtgcjcsjglxt";
//   document.getElementsByTagName("head")[0].appendChild(_script);
//   // 不能加载
//   _script.onerror = () => {
//     document.getElementById("iframeerrortip").style.display = "block";
//   }
// }

onMounted(() => {
  // 初始化验证码
  getVerifycode();
  // 获取探区信息
  fatchBasinList();
  //清除登陆信息
  store.commit("loginUserInfo/loginSucess", null);

  // iframeisCanLoad();
});
</script>
<style lang="scss" scoped>
.body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  // background-image: url("~@/assets/images/login-bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: 微软雅黑;

  .logo {
    position: fixed;
    top: 29px;
    left: 67px;
    z-index: 10;
  }
}

ul {
  list-style: none;
}

.login-wrapper {
  width: 100%;
  height: 100%;
}

.logo {
  position: fixed;
  z-index: 100;
  top: 4%;
  left: 2.5%;
  width: 9.2%;
}

.logo>img {
  width: 100%;
}

.sys-name {
  margin: 5.8% auto 0;
  width: 74.5%;
}

.sys-name>img {
  width: 100%;
}

.login-cont {
  position: fixed;
  top: 200px;
  right: 134px;
  background-color: rgb(115 207 255 / 60%);
  width: 505px;
  height: 395px;
  box-sizing: border-box;
  border-radius: 10px;
}

.login-cont>h1 {
  text-align: center;
  margin-top: 9.5%;
  margin-bottom: 7%;
  font-size: 30px;
  color: #3083e9;
  font-weight: bold;
  letter-spacing: 5px;
}

.login-cont .item {
  width: 73%;
  height: 11%;
  margin: 0 auto 2.5%;
  background: #fff;
  border-radius: 5px;
}

.login-cont .item>.input {
  width: 80%;
  height: 97%;
  border: 1px solid #ffffff;
  padding-left: 15%;
  font-size: 12px;
  color: #000;
  transition: all 0.5s;
  outline: none;
  border-radius: 5px;
}

.login-cont .item>.input:focus {
  border-color: #fff;
  /*box-shadow: 0 0 2px 2px #e7e7e7;*/
}

.login-cont .item>.input.username {
  background: url("~@/assets/images/icon-user.png") no-repeat 5% center;
}

.login-cont .item>.input.password {
  background: url("~@/assets/images/icon-pwd.png") no-repeat 5% center;
}

.login-cont .item>.input.vcode {
  background: url("~@/assets/images/icon-vcode.png") no-repeat 6% center;
  width: 70%;
  float: left;
  border-right: none;
}

.login-cont .item>.vcodeimg {
  width: 24%;
  height: 90%;
  float: right;
  transform: translate(-5px, 2px);
  border: 1px solid #cacaca;
  border: none;
  cursor: pointer;
}

.login-cont .item-submit {
  margin: 8% auto;
  width: 73%;
  height: 11%;
}

.login-cont .item-submit>.btn-submit {
  width: 100%;
  height: 100%;
  line-height: 100%;
  background-color: #3083e9;
  color: #fff;
  border: none;
  outline: none;
  font-size: 18px;
  letter-spacing: 5px;
  cursor: pointer;
  border-radius: 5px;
}

.login-cont .item-submit>.btn-submit:hover {
  background-color: #2f72c5;
}

.area-select-wrapper {
  display: none;
  position: fixed;
  top: 50px;
  right: 135px;
}

.area-select-wrapper .area-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.area-select-wrapper .area-name label {
  font-size: 16px;
  color: #fff;
}

.area-select-wrapper .area-name h2 {
  width: 128px;
  height: 28px;
  line-height: 28px;
  background-color: #fff;
  border-radius: 14px;
  font-size: 16px;
  color: #001245;
  padding: 0 16px;
  cursor: pointer;
}

.area-select-wrapper .area-name>.icon-select {
  display: block;
  position: absolute;
  width: 10px;
  height: 7px;
  background: url("~@/assets/images/icon-select.png") no-repeat;
  top: 11px;
  right: 11px;
  transition: all 0.5s;
}

.area-select-wrapper .area-name>.icon-select.up {
  transform: rotate(180deg);
}

.area-select-wrapper .area-list {
  padding: 5px 0;
  position: absolute;
  right: 0;
  top: 37px;
  width: 155px;
  background: #fff;
  border-radius: 5px;
}

@keyframes btot {
  0% {
    transform: translateY(20px);
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -o-transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    opacity: 1;
  }
}

.area-select-wrapper .area-list.show {
  display: block;
  animation: 0.5s btot;
}

.area-select-wrapper .area-list:before {
  content: "";
  width: 10px;
  height: 10px;
  display: block;
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  background: #fff;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.area-select-wrapper .area-list li {
  padding: 8px 15px;
  color: #333;
  cursor: pointer;
}

.area-select-wrapper .area-list li:hover {
  color: #e25000;
}

.sys-name {
  color: #fff;
  font-size: 42px;
  text-align: center;
  letter-spacing: 12px;
  text-shadow: 0 0 5px #5a4d4d;
}

.login-cont-xn {
  position: fixed;
  top: 30%;
  right: 5%;
  background-color: rgb(115 207 255 / 60%);
  width: 300px;
  height: 320px;
  box-sizing: border-box;
  border-radius: 10px;
}

.login-cont-xn .tongyi {
  display: block !important;
}

#ifm {
  width: 100%;
  height: 400px;
  display: block;
  position: absolute;
  top: 35px;
}

.download-ca-tip {
  width: 100%;
  height: 435px;
  display: none;
  position: absolute;
  top: 0;
  background: #fff;
  z-index: 100;
  box-sizing: border-box;
  padding: 25px;
  border-radius: 5px;
  overflow-y: auto
}

.btn-download {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  position: absolute;
  right: -40px;
  top: -5px;
}

.btn-download:hover {
  color: #dcdcdc;
}
</style>
